<template>
    <modal ref="modal_1"
           :title="title"
           :isCloseConfirm="false"
           top="5%"
           width="50%"
           height="50%"
           :close-on-click-modal="false"
           @modalOpened="opened"
           @modalClose="close">
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   v-model:page="page"
                   v-model:search="search"
                   :permission="permissionList"
                   :before-open="beforeOpen"
                   v-model="form"
                   ref="crud"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
        </avue-crud>
    </modal>
</template>

<script>
    import {getList, getDetail, add, update, remove} from "@/api/anwise/invoice/invoice_log";
    import {mapGetters} from "vuex";

    export default {
        data() {
            return {
                title:'修正查询',
                invoiceId:'',
                form: {},
                query: {},
                loading: true,
                page: {
                    pageSize: 20,
                    currentPage: 1,
                    total: 0
                },
                selectionList: [],
                option: {
                    height:'500px',
                    calcHeight: 30,
                    tip: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    searchSpan:8,
                    border: true,
                    index: false,
                    selection: false,
                    labelWidth: 150,
                    menuWidth: 120,
                    menu:false,
                    indexWidth:100,
                    addBtn: false,
                    editBtn: false,
                    viewBtn: false,
                    delBtn: false,
                    stripe: true,
                    searchIndex: 3,
                    searchIcon: false,
                  searchEnter:true,
                    column: [
                        {
                            label: "版本",
                            prop: "version",
                            type: "input",
                            width:100,
                        },
                        {
                            label: "操作记录",
                            prop: "remark",
                            type: "input",
                        },
                        {
                            label: "修正人员",
                            prop: "userName",
                            type: "input",
                            width:200,
                        },
                        {
                            label: "修正日期",
                            prop: "updateTime",
                            type: "date",
                            width:200,
                        }
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.order_log_add, false),
                    viewBtn: this.validData(this.permission.order_log_view, false),
                    delBtn: this.validData(this.permission.order_log_delete, false),
                    editBtn: this.validData(this.permission.order_log_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        methods: {
            show(id) {
                this.invoiceId = id;
                this.$refs.modal_1.show();
            },
            opened() {
                //  this.onLoad(this.page);
            },
            close() {
                this.clearData();
                this.clearSelection();
            },
            clearData() {
                this.data = [];
                this.page.currentPage = 1;
            },
            clearSelection() {
                this.selectionList = [];
                this.arrayList = [];
                this.$refs.crud.toggleSelection();
            },
            handleDelete() {
                if (this.selectionList.length === 0) {
                    this.$message.warning("请选择至少一条数据");
                    return;
                }
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(this.ids);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$refs.crud.toggleSelection();
                    });
            },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getDetail(this.form.id).then(res => {
                        this.form = res.data.data;
                    });
                }
                done();
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1
                this.onLoad(this.page, params);
                done();
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage){
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            onLoad(page, params = {}) {
                this.loading = true;
                params.invoiceId = this.invoiceId
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                    this.selectionClear();
                });
            }
        }
    };
</script>

<style>
</style>
